<template>
    <div class="full-screen-container w-[1440px] mx-auto px-8 py-6">


        <!-- 选择职业方向 -->
        <div class="bg-white rounded-xl p-0 shadow-sm border border-gray-100">
            <div class="flex items-center ml-12 pt-[20px]">
                <img src="https://ai-public.mastergo.com/ai/img_res/bd1da46bd43df6e7de5f29844780d29f.jpg" alt="Logo"
                    class="w-10 h-10" />
                <span class="ml-3 text-xl font-semibold tracking-tight">人才画像系统</span>
            </div>
            <div class="max-w-3xl mx-auto">
                <div class="text-center mb-12">
                    <h1 class="text-3xl font-semibold mb-4 tracking-tight">
                        选择您感兴趣的岗位方向
                    </h1>
                    <p class="text-gray-600">
                        请选择您感兴趣的职业方向，我们将为您生成专属的职业画像，助您找到理想的职业发展路径
                    </p>
                </div>

                <!-- 动态生成岗位卡片 -->
                <div class="grid grid-cols-3 gap-6 mb-6">
                    <jobCard v-for="(skill, index) in skills" :key="index" :iconClass="skill.iconClass"
                        :bgClass="skill.bgClass" :title="skill.title" :description="skill.description"
                        @selectJob="handleJobSelect" />
                </div>

                <!-- 进度条和按钮 -->
                <div class="bg-gray-50 rounded-lg p-6 mb-6">
                    <div class="mb-4">
                        <div class="progress-bar-bg">
                            <div class="progress-bar" :style="{ width: progressBarWidth }"></div>
                        </div>
                    </div>
                    <div class="flex justify-between items-center text-sm">
                        <div class="flex items-center text-gray-600">
                            <i class="fas fa-clock mr-2 text-primary"></i>
                            <span>已完成 {{ currentStep }}/2 步</span>
                        </div>
                        <div class="flex items-center">
                            <span class="w-2 h-2 rounded-full bg-primary mr-2"></span>
                            <span class="text-gray-600">岗位方向选择</span>
                        </div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="flex justify-between items-center">
                    <button
                        class="px-8 py-3 border border-gray-200 text-gray-600 hover:border-gray-300 rounded-md whitespace-nowrap flex items-center"
                        @click="goBack">
                        <i class="fas fa-arrow-left mr-2"></i> 返回上一步
                    </button>
                    <button
                        class="px-8 py-3 bg-primary text-white hover:bg-primary/90 rounded-md whitespace-nowrap flex items-center"
                        style="background-color: #4080FF; border-color: #4080FF;" @click="submitData">
                        进入系统
                        <i class="fas fa-arrow-right ml-2"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRoute } from "vue-router"; //用于接收上一个页面传下来的数据
import { useRouter } from "vue-router"; // 导入 vue-router 用于页面跳转
import jobCard from "./jobCard.vue";

const route = useRoute();
const router = useRouter(); // 使用 router 实例

// 默认岗位数据
const defaultSkills = [
    {
        iconClass: "iconfont icon-riLine-cpu-line",
        bgClass: "bg-tech",
        title: "技术研发",
        description: "包含软件开发、架构设计、算法等岗位",
    },
    {
        iconClass: "iconfont icon-shejichuangyi",
        bgClass: "bg-design",
        title: "设计创意",
        description: "包含视觉设计、交互设计、用户研究等岗位",
    },
    {
        iconClass: "iconfont icon-tubiaozhizuomoban_fuzhi",
        bgClass: "bg-product",
        title: "产品运营",
        description: "包含产品经理、运营策划、数据分析等岗位",
    },
    {
        iconClass: "iconfont icon-marketing",
        bgClass: "bg-sales",
        title: "市场销售",
        description: "包含市场营销、商务拓展、品牌推广等岗位",
    },
    {
        iconClass: "iconfont icon-renliziyuan",
        bgClass: "bg-hr",
        title: "人力资源",
        description: "包含人才招聘、培训发展、薪酬福利等岗位",
    },
    {
        iconClass: "iconfont icon-caiwuhangzhenglei",
        bgClass: "bg-finance",
        title: "财务行政",
        description: "包含财务管理、行政支持、法务等岗位",
    },
];

const skills = ref([...defaultSkills]);

// 存储已选择的岗位
const selectedSkills = reactive([]);

// 处理岗位选择
function handleJobSelect({ selected, ...skill }) {
    if (selected) {
        selectedSkills.push(skill);  // 添加选择
    } else {
        const index = selectedSkills.findIndex(s => s.title === skill.title);  // 根据title来查找
        if (index !== -1) {
            selectedSkills.splice(index, 1);  // 取消选择
        }
    }
}

// 保存从第一个页面传递来的数据
const selectedJobs = ref([]);

// 获取传递过来的岗位数据和当前步骤
const currentStep = ref(1);
const progressBarWidth = ref("40%");

onMounted(() => {
    const jobsData = route.query.jobs;
    const step = route.query.currentStep;

    if (jobsData) {
        selectedJobs.value = JSON.parse(jobsData);
    }
    if (step) {
        currentStep.value = parseInt(step);
        updateProgress();
    }
});

// 更新进度条宽度
function updateProgress() {
    progressBarWidth.value = `${(currentStep.value / 2) * 100}%`;
}

// 返回上一步
function goBack() {
    if (currentStep.value > 1) {
        currentStep.value--; // 减少当前步骤

        // 清空选择的岗位数据
        selectedJobs.value = []; // 清空已选择的岗位
        selectedSkills.length = 0; // 清空已选择的岗位（reactive数组）

        // 如果你需要跳转回第一个页面
        router.push({ name: "interestedPosition" }); // 假设第一个页面的路由名是 "step1"

        updateProgress(); // 更新进度条
    }
}

// 提交数据
function submitData() {
    console.log("提交的数据：", selectedJobs.value);
    // 这里可以进行后端提交
    router.push('/report')
}
</script>
  
  <!-- 自定义样式 -->
<style scoped>
body {
    min-height: 1024px;
    background-color: #f5f7fa;
    font-family: "Inter", sans-serif;
}

.progress-bar {
    height: 6px;
    background: linear-gradient(90deg, #4080ff 0%, #87b1ff 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-bar-bg {
    width: 100%;
    height: 6px;
    background: #e5e6eb;
    border-radius: 3px;
}

.job-card {
    transition: all 0.3s ease;
}

.job-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.job-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

.bg-tech {
    background: linear-gradient(135deg, #4080ff 0%, #87b1ff 100%);
}

.bg-design {
    background: linear-gradient(135deg, #ff6b6b 0%, #ffa3a3 100%);
}

.bg-product {
    background: linear-gradient(135deg, #845ef7 0%, #b197fc 100%);
}

.bg-sales {
    background: linear-gradient(135deg, #40c057 0%, #8ce99a 100%);
}

.bg-hr {
    background: linear-gradient(135deg, #f76707 0%, #ffb366 100%);
}

.bg-finance {
    background: linear-gradient(135deg, #1098ad 0%, #66d9e8 100%);
}

/* 设置页面容器宽度为 100vw 和高度为 100vh，保证页面大小与浏览器同步 */
.full-screen-container {
    width: 100vw;
    /* 浏览器窗口的宽度 */
    height: 100vh;
    /* 浏览器窗口的高度 */
    background-color: #ffffff;
    /* 可以选择合适的背景色 */
    margin: 0;
    /* 去除默认的外边距 */
    padding: 0;
    /* 去除默认的内边距 */
}

/* 如果有特定的样式应用于 .body，可以考虑调整 */
.body {
    width: 100%;
}
</style>

  